<template>
  <div class="details_box">
    <img class="img_box"
         :src="detail.imageUrl | filtersFileUrl()" />
    <div class="conte"
         style="margin: 30px">
      <div class="item">
        <span> {{ tokenObj.label }}: </span>
        <div class="tip">
          <div class="token_title">{{ detail.token }}</div>
          <el-tooltip effect="light"
                      content="复制"
                      placement="right">
            <svg-icon class="tag-read"
                      icon-class="copy"
                      @click="Copytext"
                      :data-clipboard-text="detail.token"
                      style="margin-left: 5px; cursor: pointer" />
          </el-tooltip>
        </div>
      </div>
      <div class="item">
        <span> {{ nameObj.label }}: </span>
        <div class="tip">
          <div class="token_title">{{ detail.name }}</div>
          <el-tooltip effect="light"
                      content="复制"
                      placement="right">
            <svg-icon class="tag-read"
                      icon-class="copy"
                      @click="Copytext"
                      :data-clipboard-text="detail.name"
                      style="margin-left: 5px; cursor: pointer" />
          </el-tooltip>
        </div>
      </div>
      <div class="item"
           style="align-items: baseline">
        <slot name="description"> </slot>
      </div>
    </div>
    <div class="conte"
         style="margin: 30px 100px">
      <div class="item"
           v-if="detail.areaTypeName">
        <span> {{ areaTypeObj.label }}: </span>
        <div class="description">{{ detail.areaTypeName }}</div>
      </div>
      <div class="item">
        <span> 创建时间: </span>
        <div class="description">{{ detail.createdDate | formatDate }}</div>
      </div>

      <div class="item">
        <span> 更新时间: </span>
        <div class="description">{{ detail.updatedDate | formatDate }}</div>
      </div>

      <!-- <div class="item">
        <span> 查看详情: </span>
        <div>
          <QrCodeImg :qrCode="qrCode"></QrCodeImg>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import QrCodeImg from "@/components/QrCodeImg";
import textCopy from "@/views/common/textCopy";
import { formatTime } from "@/views/common/js/utils.js";
export default {
  components: {
    QrCodeImg,
  },
  props: {
    nameObj: {
      type: Object,
      default: () => {
        return {
          label: "设备类型",
        };
      },
    },
    areaTypeObj: {
      type: Object,
      default: () => {
        return {
          label: "设备类型",
        };
      },
    },
    tokenObj: {
      type: Object,
      default: () => {
        return {
          label: "Token",
        };
      },
    },
    detail: {
      type: Object,
      default: () => { },
    },
    qrCode: {
      type: String,
      default: "",
    },
  },
  computed: {
    changewords() {
      if (!this.detail.containerPolicy) {
        return "";
      }
      if (this.detail.containerPolicy == "Standalone") {
        return "设备";
      } else if (this.detail.containerPolicy == "Composite") {
        return "设备组";
      }
    },
  },
  methods: {
    // 复制
    Copytext() {
      textCopy.copy();
    },
    // 时间格式转换
    formatDateT(date) {
      return formatTime(date);
    },
  },
};
</script>

<style lang='scss' scoped>
@import "~@/styles/mixin.scss";
.details_box {
  padding: 24px;
  background-color: #fff;
  display: flex;
  /* align-items: center; */

  /* justify-content: space-between; */
  border-radius: 4px;
  .conte {
    .item {
      display: flex;
      align-items: center;
      height: 42px;
      line-height: 42px;
      .token_title {
        width: auto;
        color: #666666;
        font-size: 14px;
        font-weight: 400;
      }
      .tip {
        display: flex;
        align-items: center;
      }
      span {
        margin-right: 10px;
        color: #333333;
        font-size: 14px;
        font-weight: 400;
        white-space: nowrap;
      }
      .description {
        color: #666666;
        font-size: 14px;
        font-weight: 400;
        /* @include textoverflow(3);
        width: 236px; */
        line-height: 22px;
      }
    }
  }
  .img_box {
    width: 207px;
    height: 207px;
    min-width: 207px;
    min-height: 207px;
    transition: all 0.6s;
    cursor: pointer;
    &:hover {
      transform: scale(1.1);
    }
  }
}
</style>